<template>
    <view class="container">
        <view class="feedback-form">
            <view class="form-item">
                <text class="label">反馈类型</text>
                <view class="type-selector">
                    <view 
                        v-for="(type, index) in feedbackTypes" 
                        :key="index"
                        :class="['type-item', selectedType === type ? 'active' : '']"
                        @click="selectedType = type"
                    >
                        {{ type }}
                    </view>
                </view>
            </view>
            
            <view class="form-item">
                <text class="label">反馈内容</text>
                <textarea 
                    class="content-input"
                    v-model="content"
                    placeholder="请详细描述您的问题或建议..."
                    maxlength="500"
                />
                <text class="word-count">{{ content.length }}/500</text>
            </view>
            
            <view class="form-item">
                <text class="label">联系方式（选填）</text>
                <input 
                    class="contact-input"
                    v-model="contact"
                    placeholder="请留下您的手机号或邮箱"
                />
            </view>
            
            <view class="form-item">
                <text class="label">上传截图（选填）</text>
                <view class="image-uploader">
                    <view 
                        class="image-item" 
                        v-for="(image, index) in images" 
                        :key="index"
                    >
                        <image :src="image" mode="aspectFill"></image>
                        <view class="delete-btn" @click="deleteImage(index)">×</view>
                    </view>
                    <view class="upload-btn" @click="chooseImage" v-if="images.length < 3">
                        <uni-icons type="camera-filled" size="24" color="#999"></uni-icons>
                    </view>
                </view>
            </view>
        </view>
        
        <button class="submit-btn" @click="submitFeedback"
        :loading="submitLoading"
        >提交反馈</button>
    </view>
</template>

<script setup>
import { ref } from 'vue'
import request from '@/utils/request.js'

const feedbackTypes = ['功能建议', '问题反馈', '其他']
const selectedType = ref('功能建议')
const content = ref('')
const contact = ref('')
const images = ref([])
const submitLoading = ref(false)

const chooseImage = async () => {
    try {
        const res = await uni.chooseImage({
            count: 1,
            sizeType: ['compressed'],
            sourceType: ['album', 'camera']
        })
		const imageUrl = await request.uploadFile(res.tempFilePaths[0])
		images.value.push(imageUrl.data)
    } catch (e) {
        console.error(e)
    }
}

const deleteImage = (index) => {
    images.value.splice(index, 1)
}

const submitFeedback = async () => {
    if (!content.value.trim()) {
        uni.showToast({
            title: '请输入反馈内容',
            icon: 'none'
        })
        return
    }
    
    try {
        submitLoading.value = true
        const feedback = {
            type: selectedType.value,
            content: content.value,
            contact: contact.value,
            images: JSON.stringify(images.value)
        }
        
        await request.post('/feedback/submit', feedback)
        
        uni.showToast({
            title: '提交成功',
            icon: 'success'
        })

        setTimeout(() => {
            uni.navigateBack()
        }, 1500)
    } catch (e) {
        uni.showToast({
            title: '提交失败',
            icon: 'none'
        })
    } finally {
        submitLoading.value = false
    }

}
</script>

<style lang="scss" scoped>
.container {
    padding: 30rpx;
}

.feedback-form {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10rpx);
    border-radius: 20rpx;
    padding: 30rpx;
    margin-bottom: 40rpx;
}

.form-item {
    margin-bottom: 30rpx;
    
    .label {
        font-size: 28rpx;
        font-weight: bold;
        margin-bottom: 20rpx;
        display: block;
    }
}

.type-selector {
    display: flex;
    gap: 20rpx;
    
    .type-item {
        padding: 15rpx 30rpx;
        border-radius: 30rpx;
        background: rgba(255, 255, 255, 0.1);
        font-size: 26rpx;
        
        &.active {
            background: #36D1DC;
            color: #fff;
        }
    }
}

.content-input {
    width: 100%;
    height: 300rpx;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 16rpx;
    padding: 20rpx;
    font-size: 28rpx;
}

.word-count {
    font-size: 24rpx;
    color: #999;
    text-align: right;
    margin-top: 10rpx;
}

.contact-input {
    width: 100%;
    height: 80rpx;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 16rpx;
    padding: 0 20rpx;
    font-size: 28rpx;
}

.image-uploader {
    display: flex;
    flex-wrap: wrap;
    gap: 20rpx;
    
    .image-item, .upload-btn {
        width: 180rpx;
        height: 180rpx;
        background: rgba(255, 255, 255, 0.1);
        border-radius: 16rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        
        image {
            width: 100%;
            height: 100%;
            border-radius: 16rpx;
        }
    }
    
    .delete-btn {
        position: absolute;
        right: -10rpx;
        top: -10rpx;
        width: 40rpx;
        height: 40rpx;
        background: rgba(0, 0, 0, 0.5);
        border-radius: 50%;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

.submit-btn {
    width: 100%;
    height: 88rpx;
    background: #36D1DC;
    color: #fff;
    border-radius: 44rpx;
    font-size: 32rpx;
    font-weight: bold;
    
    &:active {
        opacity: 0.9;
    }
}
</style> 